<div class="system-user">
  <div class="operate">
    <button nz-button [nzType]="'primary'" (click)="addUser()">
      新增用户
    </button>
  </div>
  <nz-table #basicTable [nzData]="userListData" nzSize="default" nzBordered="true" [nzNoResult]="'无数据'"
    [nzLoading]="loadData" [nzPageSizeOptions]="nzPageSizeOptions" nzShowQuickJumper="true" nzShowSizeChanger="true"
    nzHideOnSinglePage="true" (nzPageIndexChange)="changePageNumber($event)" (nzPageSizeChange)="changePageSize($event)"
    (nzCurrentPageDataChange)="currentPageDataChange($event)" nzFrontPagination="false" [nzScroll]="tableScroll"
    [nzTotal]="tableTotal" [nzPageSize]="pageSize" [nzPageIndex]="pageNumber" class="table-scroll">
    <thead>
      <tr>
        <th nzWidth="150px" nzAlign="left" nzCustomFilter>
          用户名
          <i nz-th-extra class="ant-table-filter-icon" nz-icon nz-dropdown #dropdown="nzDropdown" nzType="search"
            [nzDropdownMenu]="username" [class.ant-table-filter-open]="dropdown.nzVisible" nzTrigger="click"
            nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter></i>
        </th>
        <th nzWidth="130px" nzAlign="center" nzCustomFilter>
          手机号码
          <i nz-th-extra class="ant-table-filter-icon" nz-icon nz-dropdown #dropdown="nzDropdown" nzType="search"
            [nzDropdownMenu]="mobile" [class.ant-table-filter-open]="dropdown.nzVisible" nzTrigger="click"
            nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter></i>
        </th>
        <th nzWidth="180px" nzAlign="left" nzCustomFilter>
          邮箱
          <i nz-th-extra class="ant-table-filter-icon" nz-icon nz-dropdown #dropdown="nzDropdown" nzType="search"
            [nzDropdownMenu]="email" [class.ant-table-filter-open]="dropdown.nzVisible" nzTrigger="click"
            nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter></i>
        </th>
        <th nzWidth="80px" nzAlign="center" nzShowFilter [nzFilters]="listOfFilterStatus" [nzFilterMultiple]="false"
          (nzFilterChange)="filterStatusChange($event)">状态</th>
        <th nzWidth="150px" nzAlign="left">平台</th>
        <th nzWidth="130px" nzAlign="center">超级管理员</th>
        <th nzWidth="180px" nzAlign="center">创建时间</th>
        <th nzWidth="180px" nzAlign="center">更新时间</th>
        <th nzAlign="center">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td nzAlign="left">{{ data.username }}</td>
        <td nzAlign="center">{{ data.mobile }}</td>
        <td nzAlign="left">{{ data.email }}</td>
        <td nzAlign="center">
          <img src="/assets/images/yes.gif" *ngIf="data.status==1" />
          <img src="/assets/images/no.gif" *ngIf="data.status==0" />
        </td>
        <td nzAlign="left">{{ data.platform }}</td>
        <td nzAlign="center">
          <span *ngIf="data.is_super==1">是</span>
          <span *ngIf="data.is_super==0">否</span>
        </td>
        <td nzAlign="center">{{ data.created_at | date:'yyyy-MM-dd HH:mm:ss' }}</td>
        <td nzAlign="center">{{ data.updated_at | date:'yyyy-MM-dd HH:mm:ss' }}</td>
        <td nzAlign="center">
          <button nz-button nzType="default" (click)="editUser(data)">
            <i nz-icon nzType="edit" nzTheme="outline"></i>修改</button>
          <nz-divider nzType="vertical"></nz-divider>
          <button nz-button nzType="default" (click)="assignRole(data)">
            <i nz-icon nzType="tool" nzTheme="outline"></i>分配角色</button>
          <nz-divider nzType="vertical"></nz-divider>
          <button nz-button nzType="primary" (click)="resetPassword(data)">
            <i nz-icon nzType="rest" nzTheme="outline"></i>重置密码</button>
          <nz-divider nzType="vertical"></nz-divider>
          <button nz-button nzType="danger" (click)="deleteUser(data)">
            <i nz-icon nzType="delete" nzTheme="outline"></i>删除</button>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>

<!-- 添加数据的弹框 -->
<app-edit-user (saveSuccess)="saveSuccess()" (closeModal)="closeModal()" [rowData]="rowData" *ngIf="isOpenModal">
</app-edit-user>

<!-- 用户名 -->
<nz-dropdown-menu #username="nzDropdownMenu">
  <div class="search-box">
    <input type="text" nz-input placeholder="请输入用户名(支持模糊查询)" [(ngModel)]="searchData.username" />
    <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
      搜索
    </button>
    <button nz-button nzSize="small" (click)="reset('username')">重置</button>
  </div>
</nz-dropdown-menu>

<!-- 手机号码 -->
<nz-dropdown-menu #mobile="nzDropdownMenu">
  <div class="search-box">
    <input type="text" nz-input placeholder="请输入手机号码" [(ngModel)]="searchData.mobile" />
    <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
      搜索
    </button>
    <button nz-button nzSize="small" (click)="reset('mobile')">重置</button>
  </div>
</nz-dropdown-menu>

<nz-dropdown-menu #email="nzDropdownMenu">
  <div class="search-box">
    <input type="text" nz-input placeholder="请输入邮箱" [(ngModel)]="searchData.email" />
    <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
      搜索
    </button>
    <button nz-button nzSize="small" (click)="reset('email')">重置</button>
  </div>
</nz-dropdown-menu>
